<template>
  <div>
    <div class="talent_goods_details">
      <div class="tgd_goods_look">
        <div class="tgd_look_title">
          <div class="tgd_title_box">
            <div class="tgd_line"></div>
            <div class="tgd_text">带货概览</div>
          </div>
          <div class="tgd_time">
            <RadioGroup v-model="goodsTime" :radio_values="['近7天', '30天', '90天']" />
          </div>
        </div>
        <div class="tgd_look_content" v-if="!showPageVip">
          <div v-if="!loading1">
            <div class="tgd_content_row">
              <div class="tgd_content_item">
                <div class="num">{{ LiveShop == 1 ? goodsData.totalGoods : "--" }}</div>
                <div class="text">商品数</div>
              </div>
              <div class="tgd_content_item">
                <div class="num">{{ LiveShop == 1 ? goodsData.liveProduct : "--" }}</div>
                <div class="text">直播商品数</div>
              </div>
              <div class="tgd_content_item">
                <div class="num">{{ LiveShop == 1 ? goodsData.awemeProduct : "--" }}</div>
                <div class="text">视频商品数</div>
              </div>
            </div>
            <div class="tgd_content_row">
              <div class="tgd_content_item">
                <div class="num" v-if="LiveShop == 1">
                  {{
                  goodsData.wholeNetworkVolumme >= 0
                  ? format_num(goodsData.wholeNetworkVolumme)
                  : 0
                  }}
                </div>
                <div class="num" v-else>--</div>
                <div class="text">全网销量(件)</div>
              </div>

              <div class="tgd_content_item">
                <div
                  class="num"
                >{{ LiveShop == 1 ? format_num(goodsData.wholeNetworkAmount) : "--" }}</div>
                <div class="text">全网销售额</div>
              </div>
              <div class="tgd_content_item">
                <div class="num">{{ LiveShop == 1 ? format_num(goodsData.liveVolume) : "--" }}</div>
                <div class="text">直播销量(件)</div>
              </div>
            </div>
          </div>
          <van-loading
            style="margin:1.75rem 0rem;"
            class="loading"
            v-if="loading1"
            type="spinner"
            :vertical="true"
          />
        </div>
        <noPower :minLeve="$store.state.userRoot[5][111].ownerMinLevel" v-if="showPageVip" />
      </div>
      <div class="tgd_goods_data">
        <div class="tgd_look_title">
          <div class="tgd_title_box">
            <div class="tgd_line"></div>
            <div class="tgd_text">带货数据</div>
          </div>
        </div>
        <div class="tgd_goods_check">
          <div
            :class="{ goodsCheck: goodsCheck == 1 }"
            class="goods_check_item"
            @click="goodsCheck = 1"
          >商品类目TOP5</div>
          <div
            :class="{ goodsCheck: goodsCheck == 2 }"
            class="goods_check_item"
            @click="goodsCheck = 2"
          >商品价格分布</div>
        </div>
        <!-- 商品类目分布 -->
        <template v-if="!showPageVip">
          <div class="tgd_echarts_box" v-if="goodsCheck == 1">
            <BigPie
              v-if="categoryRate.length != 0 && !loading2"
              :valueData="categoryRate"
              Etitle="商品类目分布"
            />
            <van-loading
              style="padding-top:2.5rem; box-sizing:border-box"
              class="loading"
              v-if="loading2"
              type="spinner"
              :vertical="true"
            />
            <div class="tgd_no_data" v-if="!categoryRate.length && !loading2">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </div>
          <!-- 商品价格分布 -->
          <div class="tgd_echarts_box" v-if="goodsCheck == 2">
            <BigPie
              v-if="priceRate.length != 0 && !loading2"
              :valueData="priceRate"
              Etitle="商品价格分布"
            />
            <van-loading
              style="padding-top:2.5rem; box-sizing:border-box"
              class="loading"
              v-if="loading2"
              type="spinner"
              :vertical="true"
            />
            <div class="tgd_no_data" v-if="!priceRate.length && !loading2">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </div>
        </template>
        <noPower :minLeve="$store.state.userRoot[5][111].ownerMinLevel" v-if="showPageVip" />
      </div>
      <div class="tgd_goods_list">
        <div class="tgd_look_title">
          <div class="tgd_title_box">
            <div class="tgd_line"></div>
            <div class="tgd_text">商品列表</div>
          </div>
        </div>
        <template v-if="!showPageVip">
          <div class="tgd_input_box" v-if="goodsData.totalGoods != 0">
            <input
              class="tgd_input"
              v-model.trim="InputKeyWord"
              placeholder="请输入商品关键词搜索"
              type="text"
              @keydown.enter="searchList"
            />
            <img
              class="tgd_img"
              v-if="!imgBox"
              src="@/assets/one/seach.png"
              alt
              @click="searchList"
            />
            <img
              class="tgd_img"
              v-if="imgBox"
              src="@/assets/two/search.png"
              alt
              @click="searchList"
            />
          </div>
          <div class="goods_list_box">
            <div
              class="goods_list_item"
              v-for="(item, index) in listData"
              :key="index"
              @click="toGoodsDetails(item.proId)"
            >
              <div class="list_box_top" @click="toGoodsDetails(item.proId)">
                <div class="list_top_img">
                  <img :src="item.proLogo" />
                </div>
                <div class="list_top_text">{{ item.proTitle }}</div>
              </div>
              <div class="list_box_btm">
                <div class="list_btm_item">
                  <div class="num">{{ format_num(item.proPrice) }}</div>
                  <div class="text">价格</div>
                </div>
                <div class="list_btm_item">
                  <div class="num">{{ format_num(item.liveC) }}</div>
                  <div class="text">关联直播</div>
                </div>
                <div class="list_btm_item">
                  <div class="num">{{ format_num(item.awemeC) }}</div>
                  <div class="text">关联视频</div>
                </div>
                <div class="list_btm_item">
                  <div class="num">{{ format_num(item.amount) }}</div>
                  <div class="text">销售额</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 暂无列表数据 -->
          <div class="tgd_list_nodata" v-if="!listData.length && !listBottomLoading">
            <img src="@/assets/one/zw.png" alt />
            <div class="zw">暂无数据</div>
          </div>
          <!-- 列表loading -->
          <van-loading class="loading" style="margin:.4rem 0rem .2rem;" v-if="listBottomLoading" type="spinner" :vertical="true" />
          <!-- 查看更多 -->
          <div class="tgd_more_box" v-if="listData.length">
            <div
              class="tgd_more_button"
              v-if="!listBottomLoading && !isLastPage"
              @click="lookMore"
            >查看更多</div>
            <div class="tgd_details" v-if="isLastPage">
              我是有底线的~
            </div>
          </div>
        </template>
        <noPower :minLeve="$store.state.userRoot[5][111].ownerMinLevel" v-if="showPageVip" />
      </div>
      <!-- <div v-if="listBottomLoading" class="blank_holder"></div> -->
    </div>
    <div class="bott"></div>
  </div>
</template>

<script>
import RadioGroup from './EComponents/RadioGroup.vue';
import BigPie from '@/component/BigPie.vue';
export default {
  components: { RadioGroup, BigPie },
  props: ['LiveShop'],
  data() {
    return {
      goodsCheck: 1, //带货数据 tabs切换
      goodsTime: '30天',
      startDate: this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D'),
      endDate: this.timestamp((Date.now() / 1000) * 1, 'Y-M-D'),
      InputKeyWord: '',
      PageIndex: 1, //页码
      PageSize: 10, //每页的条数

      goodsData: {}, // 数据概览数据
      categoryRate: [], //图表数据
      priceRate: [], //图表数据
      listData: [], //列表数据
      totalCount: 0, //列表总条数

      loading1: false, //数据概览数据loading
      loading2: false, //图表的loading
      loading3: false, //列表的loading
      isLastPage: false,
      listBottomLoading: false, //底部加载loading
      showPageVip: false,
      imgBox: false
    };
  },
  watch: {
    goodsTime: function (newVal, oldVal) {
      this.changeTime();
    },
    InputKeyWord: function (newVal, oldVal) {
      if (!newVal) {
        this.imgBox = false;
        this.listData = [];
        this.getListData();
      } else {
        this.imgBox = true;
      }
    }
  },

  computed: {},
  created() {
    this.changeTime();
  },
  mounted() {},

  methods: {
    changeTime() {
      this.PageIndex = 1;
      this.listData = [];
      switch (this.goodsTime) {
        case '近7天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 6, 'Y-M-D');
          break;
        case '30天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D');

          break;
        case '90天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 89, 'Y-M-D');
          break;
      }
      this.getGoodsData();
      this.getCategoryTrend();
      this.getListData();
    },

    // 点击搜索
    searchList() {
      this.PageIndex = 1;
      this.listData = [];
      this.getListData();
    },
    // 列表查看更多事件
    lookMore() {
      this.PageIndex++;
      this.getListData();
    },
    // 带货概览
    getGoodsData() {
      this.loading1 = true;
      this.$axios
        .get('/api/Author/CommerceData', {
          params: {
            authorId: this.$route.query.id,
            star_time: this.startDate,
            end_time: this.endDate
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.loading1 = false;
            this.goodsData = res.data.data;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },

    // Echarts图表数据
    getCategoryTrend() {
      this.loading2 = true;
      this.categoryRate = [];
      this.priceRate = [];
      this.$axios
        .get('/api/Author/PriceAndCategoryTrend', {
          params: {
            authorId: this.$route.query.id,
            star_time: this.startDate,
            end_time: this.endDate
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.loading2 = false;
            this.categoryRate = res.data.data.categoryRate;
            this.priceRate = res.data.data.priceRate;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
          if (res.data.code == 1001) {
            this.loading2 = false;
            this.categoryRate = [];
            this.priceRate = [];
          }
        });
    },

    // 列表数据
    getListData() {
      // 商品来源
      this.loading3 = true;
      this.isLastPage = false;
      this.listBottomLoading = true;
      // this.listData = [];
      this.$axios
        .post('/api/Author/GetAuthorSellProductData', {
          authorId: this.$route.query.id,
          keyword: this.InputKeyWord,
          profrom: -1,
          ProPrice: -1,
          ProShop: -1,
          ProCategory: -1,
          SellProductType: -1,
          page: this.PageIndex, //页数
          size: this.PageSize, //每页多少条数据
          sort: 1, //排序字段 0优惠券价 1销量 2 销售额 3 关联直播数 4 关联商品数
          order_by: 'desc', // 排序方式 0 asc 升序,1 desc 降序,
          star_time: this.startDate,
          end_time: this.endDate
        })
        .then(res => {
          this.loading3 = false;
          if (res.data.code == 0) {
            this.listBottomLoading = false;
            this.listData.push(...res.data.data);
            this.totalCount = res.data.count;

            if (this.totalCount == this.listData.length) {
              this.isLastPage = true;
            }
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },

    toGoodsDetails(proId) {
      this.$router.push({
        path: '/goodsDetailsMain',
        query: {
          id: proId
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.bott {
  width: 100%;
  height: 0.36rem;
  background-color: #f1f1f1;
}
.talent_goods_details {
  padding: 0 0.4rem;
}
.tgd_goods_look {
  margin-top: 0.6rem;
  .tgd_look_title {
    display: flex;
    justify-content: space-between;
    .tgd_title_box {
      display: flex;
      align-items: center;
      .tgd_line {
        width: 0.08rem;
        height: 0.373333rem;
        background-color: #fd7f2c;
        border-radius: 0.04rem;
      }
      .tgd_text {
        font-size: 0.4rem;
        font-weight: 600;
        color: #222222;
        margin-left: 0.186667rem;
      }
    }
  }
  .tgd_look_content {
    .tgd_content_row {
      display: flex;
      justify-content: space-around;
      margin-top: 0.8rem;
      .tgd_content_item {
        width: 30%;
        text-align: center;
        .num {
          font-size: 0.453333rem;
          color: #222222;
          font-family: Dinpro-medium;
        }
        .text {
          font-size: 0.32rem;
          color: #888888;
          margin-top: 0.1rem;
        }
      }
    }
  }
}
.tgd_goods_data {
  margin-top: 0.6rem;
  .tgd_echarts_box {
    height: 5.4667rem;
  }
  .tgd_look_title {
    display: flex;
    justify-content: space-between;
    .tgd_title_box {
      display: flex;
      align-items: center;
      .tgd_line {
        width: 0.08rem;
        height: 0.373333rem;
        background-color: #fd7f2c;
        border-radius: 0.04rem;
      }
      .tgd_text {
        font-size: 0.4rem;
        font-weight: 600;
        color: #222222;
        margin-left: 0.186667rem;
      }
    }
  }
  .tgd_goods_check {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    .goods_check_item {
      width: 4.506667rem;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      border: solid 1px #e5e5e5;
      border-radius: 0.053333rem;
      box-sizing: border-box;
      font-size: 0.32rem;
      color: #555555;
    }
    .goodsCheck {
      background-color: #fd7f2c;
      border: none;
      color: #ffffff;
    }
  }
}
.tgd_goods_list {
  padding-bottom: 0.666667rem;
  .tgd_look_title {
    display: flex;
    justify-content: space-between;
    .tgd_title_box {
      display: flex;
      align-items: center;
      .tgd_line {
        width: 0.08rem;
        height: 0.373333rem;
        background-color: #fd7f2c;
        border-radius: 0.04rem;
      }
      .tgd_text {
        font-size: 0.4rem;
        font-weight: 600;
        color: #222222;
        margin-left: 0.186667rem;
      }
    }
  }
  .tgd_input_box {
    width: 100%;
    height: 0.986667rem;
    margin-top: 0.4rem;
    border-radius: 0.133333rem;
    border: solid 1px #e5e5e5;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
    .tgd_input {
      width: 82%;
      height: 100%;
      border: none;
      margin-left: 0.426667rem;
      font-size: 0.373333rem;
      color: #222;
    }
    .tgd_input::placeholder {
      font-size: 0.373333rem;
      color: #b5b5b5;
    }
    .tgd_img {
      width: 0.4rem;
      height: 0.4rem;
      margin-left: 0.4rem;
    }
  }
  .goods_list_box {
    .goods_list_item {
      margin-top: 0.4rem;
      border-bottom: 1px solid #e5e5e5;
      .list_box_top {
        display: flex;
        align-items: center;
        .list_top_img {
          width: 1.333333rem;
          height: 1.333333rem;
          background-color: #ff7600;
          border-radius: 0.266667rem;
          img {
            width: 100%;
            height: 100%;
            border-radius: 0.266667rem;
          }
        }
        .list_top_text {
          margin-left: 0.4rem;
          width: 6.666667rem;
          height: 100%;
          font-size: 0.4rem;
          color: #222222;

          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .list_box_btm {
        display: flex;
        justify-content: space-around;
        margin: 0.4rem 0;
        .num {
          text-align: center;
          font-size: 0.4rem;
          color: #222222;
          font-family: Dinpro-medium;
        }
        .text {
          text-align: center;
          font-size: 0.32rem;
          color: #888888;
        }
      }
    }
  }
}
.tgd_more_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .tgd_more_button {
    width: 2.133333rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    border-radius: 0.133333rem;
    border: solid 1px #fd7f2c;
    font-size: 0.346667rem;
    color: #fd7f2c;
    margin-top: 0.666667rem;
  }
  .tgd_details {
    font-size: 0.32rem;
    color: #b5b5b5;
    margin-top: 0.4rem;
  }
}
.tgd_no_data {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 4rem;
    height: 2.8rem;
  }
  .zw {
    font-size: 0.346667rem;
    color: #888888;
  }
}
.tgd_list_nodata {
  width: 100%;
  height: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 4rem;
    height: 2.8rem;
  }
  .zw {
    font-size: 0.346667rem;
    color: #888888;
  }
}
</style>
